<template>
    <el-drawer
        title="选择"
        :visible.sync="drawer"
        :direction="'btt'"
        class="selectUserContent"
        :size="650"
        :before-close="handleClose">
        <el-row style="margin: 0;z-index: 1000; " :gutter="20">
            <!--部门数据-->
            <el-col :span="4" class="treeBox" :xs="24">
                <TreeIndex :deptOptions="deptOptions" @handleNode="handleNodeClick" :title="'部门信息'"></TreeIndex>
            </el-col>
            <el-col :span="20" :xs="24">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="辅导员列表" name="allList">
                        <searchForm
          :formOptions="formOptions"
          @onSearch="onSearch"
          @onReset="onReset"
          :formLabelWidth="formLabelWidth"
          v-if="isCommittee"
        />
                        <searchForm
          :formOptions="studentWidth"
          @onSearch="onSearch"
          @onReset="onReset"
          :formLabelWidth="formLabelWidth"
          v-if="isStudentClub"
        />
                        <el-table
                            :data="allTableData"
                            ref="multipleTable"
                            @select="rowSelect"
                            @select-all="selectAll"
                            style="width: 100%"
                            height="440"
                            >
                            <el-table-column type="selection" width="55" align="center" />
                            <el-table-column
                                v-for="item in tableColumn"
                                :key="item.prop"
                                :prop="item.prop"
                                :label="item.label"
                                :show-overflow-tooltip="true"
                                :align="'center'"
                                
                            >
                                <!-- <template v-if="item.prop =='teacher.sex'" slot-scope="scope">
                                    <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"></dict-tag>
                                </template> -->
                                <!-- <template v-if="item.prop=='studentType'" slot-scope="scope">
                                    <dict-tag :options="dict.type.bc_student_type" :value="scope.row.studentType"></dict-tag>
                                </template> -->
                            </el-table-column>
                        </el-table>
                        <pagination
                            v-show="total > 0"
                            :total="total"
                            :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize"
                            @pagination="getList"
                            />
                    </el-tab-pane>
                    <el-tab-pane label="已选择" name="haveList">
                        <span slot="label">
                            <el-badge :value="haveTableData.length" class="badgeItem" :hidden="!haveTableData.length" :type="'primary'">
                                已选择
                            </el-badge>
                        </span>
                        <el-table
                            :data="haveTableData"
                            style="width: 100%"
                            height="440"
                            >
                            <el-table-column
                                v-for="item in tableColumn"
                                :key="item.prop"
                                :prop="item.prop"
                                :label="item.label"
                                :show-overflow-tooltip="true"
                                :align="'center'"
                            ></el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </el-drawer>
</template>

<script>
import TreeIndex from "@/components/tree/index.vue";
import { deptTreeSelect } from "@/api/system/user";
import { getDicts } from "@/api/system/dict/type";

import {
    teacherList
} from "@/api/information/teacherInfor";
import {
  studentList,classTree
} from "@/api/information/studentInfor";
import searchForm from "@/components/Search/searchForm.vue";

export default {
    name: 'selectUser',
    dicts: [
    "sys_user_sex"
  ],
  props:{
    isCommittee: {
      type: Boolean,
      default: false,
    },
    isStudentClub: {
      type: Boolean,
      default: false,
    },
  },
    components: { 
        TreeIndex,
        searchForm
    },
    data () {
        return {
            showSearch: true,
            formLabelWidth: "80px",
      formOptions: [
        // {
        //   label: "单位名称",
        //   prop: "deptNames",
        //   element: "el-input",
        //   placeholder: "请输入名称"
        // },
        {
          label: "姓名",
          prop: "name",
          element: "el-input",
          placeholder: "请输入姓名"
        },
        {
          label: "工号",
          prop: "tno",
          element: "el-input",
          placeholder: "请输入工号"
        },
        {
          label: "岗位状态",
          prop: "postStatus",
          element: "el-select",
          options: [],
          initValue: '11',
          placeholder: "请选择岗位状态"
        },
      ],
      studentWidth: [
        // {
        //   label: "单位名称",
        //   prop: "deptNames",
        //   element: "el-input",
        //   placeholder: "请输入名称"
        // },
        {
          label: "姓名",
          prop: "name",
          element: "el-input",
          placeholder: "请输入姓名"
        },
        {
          label: "注册号",
          prop: "tno",
          element: "el-input",
          placeholder: "请输入注册号"
        },
        {
          label: "学号",
          prop: "tno",
          element: "el-input",
          placeholder: "请输入学号"
        },
        
      ],
            drawer: false,
            deptOptions: [],
            activeName: 'allList',
            teacherColumn:[{
                prop: 'tno',
                label: '工号'
            },{
                prop: 'name',
                label: '姓名'
            },{
                prop: 'sex',
                label: '性别'
            },{
                prop: 'deptNames',
                label: '单位名称'
            }],
            studentColumn:[
                {
                prop: 'registerCode',
                label: '注册号'
            },
                {
                prop: 'sno',
                label: '学号'
            },
            {
                prop: 'name',
                label: '姓名'
            },{
                prop: 'sex',
                label: '性别'
            },
            {
                prop: 'deptNames',
                label: '所在院部'
            },
            {
                prop: 'className',
                label: '班级'
            },
        ],

            tableColumn:[],
            allTableData: [],
            haveTableData: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deptId: "",
                postStatus: '11'
            },
            total: 0
        }
    },
    created() {
        console.log(this.isCommittee,this.isStudentClub,'sssssssss')
        if(this.isCommittee){
            getDicts("basic_post_status").then(res => {
      this.formOptions[2].options = res.data.map(item => {
        return {
          value: item["dictValue"],
          label: item["dictLabel"]
        };
      });
    });
        this.department();
        }else {
            console.log('学生')
            classTree().then(response => {
      console.log('res:',response)
      this.deptOptions = response.data
    })
        }
        
    },
    methods: {
        open () {
            this.drawer = true
           
           
                
                // if(this.isCommittee){
                //     this.getTeacherList()
                //     this.tableColumn = this.teacherColumn
                // }else{
                //     this.getStudentList()
                //     this.tableColumn = this.studentColumn
                // }
      
            this.getList()
        },
        formatter(row) {
            console.log(row,'lie')
            return row.sex === "0" ? '男': '女'
        },
        initData () {
            this.activeName = 'allList'
            this.tableColumn = []
            this.allTableData = []
            this.haveTableData = []
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                deptId: "",
                postStatus: 11
            }
            this.total = 0
        },
        handleClose(done) {
            const userIds = this.haveTableData
            this.$emit("update:sendUserIds", userIds)
            done();
        },
        handleClick (e) {
        },
        rowSelect(selection, row) {
      // this.haveTableData = selection
      if (selection.length) {
        if (
          !this.haveTableData.some((item) => {
            return item.id == row.id;
          })
        ) {
          console.log("走了", row);
          this.haveTableData.push(row);
          // this.haveTableData = selection
        } else {
          //   this.haveTableData = this.haveTableData.filter((item) => {
          //   return !this.allTableData.some((row) => {
          //     return row.id == item.id;
          //   });
          // });
          console.log("走了2", this.haveTableData);
          this.haveTableData = this.haveTableData.filter((item) => {
            return row.id != item.id;
          });
          console.log("走了1", this.haveTableData);
        }
      } else {
        this.haveTableData = this.haveTableData.filter((item) => {
          return row.id != item.id;
        });
      }
    },
    selectAll(selection) {
      if (selection.length) {
        const newSelected = selection.filter(item =>!this.haveTableData.some(oldItem => oldItem.id === item.id));
      this.haveTableData = [...this.haveTableData, ...newSelected];
        // selection.forEach((data) => {
        //   this.haveTableData.push(data);
        // });
        // const uniqueArray = this.haveTableData.filter((item, index, self) => {
        //   return self.findIndex((t) => t.id === item.id) === index;
        // });
        // this.haveTableData = uniqueArray
        // console.log(this.haveTableData,uniqueArray, "1`");

        // if (
        //   !this.haveTableData.some((item) => {
        //     return item.id == row.id;
        //   })
        // ) {
        //   console.log("走了", selection);
        //   this.haveTableData.push(selection);
        //   // this.haveTableData = selection
        // }
        // this.haveTableData = selection
        // selection.forEach(row => {
        //   this.rowSelect([row], row);
        // });
      } else {
        this.haveTableData = this.haveTableData.filter((item) => {
          return !this.allTableData.some((row) => {
            return row.id == item.id;
          });
        });
      }
    },
        getTeacherList(){
            teacherList(this.queryParams).then(response => {
                console.log(response,this.tableColumn,'辅导员信息')
                this.allTableData = response.rows;
                this.total = response.total;
                this.toggleSelection(response.rows)
            });
        },
        getStudentList(){
            studentList(this.queryParams).then(response => {
                this.allTableData = response.rows;
                console.log(response,this.allTableData,'学生')
                this.total = response.total;
                this.toggleSelection(response.rows)
            });
        },
        onSearch(val) {
      // 查询条件和分页数据合并
      this.queryParams = Object.assign(this.queryParams, val);
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    onReset(data) {
      this.queryParams.deptId = ''
      this.queryParams = Object.assign(this.queryParams, data);
      this.queryParams.pageNum = 1;
      this.getList();
    },
        getList() {
            if(this.isCommittee){
                    this.getTeacherList()
                    this.tableColumn = this.teacherColumn
                }else{
                    this.getStudentList()
                    this.tableColumn = this.studentColumn
                }
        },
        toggleSelection(rows) {
            this.$nextTick(() => {
                if (rows) {
                    rows.forEach(row => {
                        console.log(row,'row')
                        if (this.haveTableData.some((haveRow) => {return row.userId == haveRow.userId})) {
                            this.$refs.multipleTable.toggleRowSelection(row);
                        }
                        if(row.sex == '0') {
                            row.sex = '男'
                        }else if(row.sex == '1') {
                            row.sex = '女'
                        }else {
                            row.sex = '未知'
                        }
                    });
                }
                else {
                    this.$refs.multipleTable.clearSelection();
                }
            })
        },
        // 获取部门信息
        department() {
            deptTreeSelect().then(res => {
                this.deptOptions = res.data;
            });
        },
        // tree树形选中的值
        handleNodeClick(data) {
            console.log(data, "选中的值");
            this.queryParams.deptId = data.id
            this.getList()
        }
    }
}
</script>

<style lang="scss" scoped>
    .treeBox{
        height: 550px;
    }
    .selectUserContent{
        ::v-deep .el-drawer__header{
            margin-bottom: 5px;
        }
        ::v-deep .el-badge__content.is-fixed {
            position: absolute;
            top: 15px;
            right: 3px;
        }
    }
    ::v-deep .pagination-container{
        height: 33px;
    }
</style>